<template>
  <div class="home_con">
    <header class="header">
      <h3>实时数据可视化</h3>
    </header>
    <div class="wrapper">
      <div class="container-fluid">
        <div class="row fill-h">
          <div class="col-lg-3 fill-h">
            <div class="xpanel-wrapper xpanel-wrapper-3">
              <div class="xpanel car_show">
                <div id="drawChartCarRealTimeNum" style="height:100%;width: 100%"></div>
                <div id="drawChartCarActiveNum" style="height:100%;width: 100%"></div>
              </div>
            </div>
            <div class="xpanel-wrapper xpanel-wrapper-3">
              <div class="xpanel">
                <p style="color:white;font-weight: bold">实时车辆活跃top10</p>
                <div id="provinceTop" style="height:100%;margin-top: -50px"></div>
              </div>
            </div>
            <div class="xpanel-wrapper xpanel-wrapper-2">
              <div class="xpanel">
                <div class="left-center" id="drawChartCarPeriodTimeNum" style="height:100%;width:100%"></div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 fill-h">
            <div class="xpanel-wrapper xpanel-wrapper-1">
              <div class="xpanel">
                <p style="color:white;font-size:18px">{{curretTime}}</p>
                <div id="byteVCellId" style="height: 100%"></div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 fill-h">
            <div class="xpanel-wrapper xpanel-wrapper-3">
              <div class="xpanel ">
                <p style="color:white;font-weight: bold">实时应用车辆数</p>
                <div class="car_show">
                  <div id="real_app_1" style="height:150%;width: 40%"></div>
                  <div id="real_app_2" style="height:150%;width: 40%"></div>
                  <div id="real_app_3" style="height:150%;width: 40%"></div>
                </div>
                <!--                  <p style="color:white;font-weight: bold" v-for="item in appRealPoJoList">[{{item.value2}}] - 实时活跃应用车辆数：{{item.value1.split('.')[0]}}</p>-->
              </div>
            </div>
            <div class="xpanel-wrapper xpanel-wrapper-3">
              <div class="xpanel">
                <p style="color:white;font-weight: bold">活跃应用车辆数</p>
                <div class="car_show">
                <!--  1-> 音乐  2-> 语音  3-> 导航                -->
                  <div id="active_app_1" style="height:150%;width: 40%"></div>
                  <div id="active_app_2" style="height:150%;width: 40%"></div>
                  <div id="active_app_3" style="height:150%;width: 40%"></div>
                </div>
                <!--                  <p style="color:white;font-weight: bold" v-for="item in appPojoDailyList">[{{item.value2}}] - 今日活跃车辆数：{{item.value1.split('.')[0]}}</p>-->
              </div>
            </div>
            <div class="xpanel-wrapper xpanel-wrapper-2">
              <div class="xpanel">
                <div class="right-center" id="drawChartAppPeriodTimeNum" style="height:100%"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import "../assets/css/app.css";
  import "../assets/css/bootstrap.min.css";

  import 'echarts/map/js/china.js'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/chart/heatmap'
  import 'echarts/lib/component/toolbox'
  import 'echarts/lib/component/tooltip'

  export default {
    name: "WTScreen",
    data() {
      return {
        // 实时车辆数量
        realTimeCarNum: 0,
        realTimeCarNumMax: 0,
        // 当前时间
        curretTime: "",
        // 今日活跃车辆
        dailyCarNum: 0,
        dailyCarNumMax: 0,
        // 实时使用app的车辆数
        realTimeAppNum: "",
        // 累计应用活跃的车辆数
        dailyAppNumNav: 0,
        dailyAppNumMusic: 0,
        dailyAppNumVoice: 0,
        // 含有地理位置信息的车辆信息
        carLocations: [],
        // //
        // appPojoDaily:{
        //   value1:"",
        //   value2:"",
        //   value3:""
        // },
        // 截止到今日当时的app分类数量
        appPojoDailyList: [],
        // 实时的app分类数量
        appRealPoJoList: [],

        //时间轴
        timeAxis: [],
        // car的分时今日数据
        carTodayPeriodData: [],
        carMax: 0,
        // car的分时昨日数据
        carYesterdayPeriodData: [],
        appMax: 0,
        // app时间轴
        timeAppAxis: [],
        // app的分时今日数据
        appTodayPeriodData: [],
        // app的分时昨日数据
        appYesterdayPeriodData: [],
        // 热力图
        locationCarsList: [],

        // top的列表
        proTopList1: [],
        proTopList2: []
      }
    },
    mounted() {
      this.drawChartCarPeriodTimeNum();
      this.drawChartAppPeriodTimeNum();
      // 刷新时候的第一次加载，将今天的分时段都加载到
      this.initCarPeriod();
      this.initCarAppPeriod();

      this.getRealCarData();
      this.getCurrentTime();
      this.getDailyCarNum();
      this.getRealAppData();
      this.getDailyAppNum();
      this.getCarLocationData();


      // this.getDataForProvinceTop()
      // setInterval(this.getRealAppData,30000)

      // this.syncAppAreaData();
      // this.syncCarAreaData();
      // this.syncAppDailyAreaData();
      // this.syncCarDailyAreaData();
      // this.syncCarLocationData()
      // setInterval(this.syncCarLocationData, 3000)


      //动态显示时间
      setInterval(this.getCurrentTime, 1000)
      // // 设置定时器 - apparea ，方法不加括号
      setInterval(this.getRealAppData, 60000)
      // // 设置定时器 - appDailyArea
      setInterval(this.getDailyAppNum, 60000)
      // // 设置定时器 - CarArea
      setInterval(this.getRealCarData, 60000)
      // // 设置定时器 - carDailyArea
      setInterval(this.getDailyCarNum, 60000)
      // 设置定时器 - carLocation
      setInterval(this.getCarLocationData, 60000)
    },
    methods: {

      // test(){
      //   console.log((Math.random(1)+1).toFixed(2))
      // },
      // 获取车辆的实时地域分布
      getCarLocationData() {
        var api = this.Global.baseUrl+"/carLocationData"
        // var api = "http://bigdata13:8082/carLocationData"
        this.$axios.get(api).then((response) => {
          var tempList = []
          for (var i = 0; i < response.data.length; i++) {
            tempList[i] = response.data[i]
          }
          this.locationCarsList = tempList
          this.DrawChartsHeartMap();

          // 获取top10
          this.getDataForProvinceTop()
          // 同步数据
          // this.syncCarLocationData()
        }).catch((error) => {
          console.log(error)
        })
      },
      // 绘制热力图
      DrawChartsHeartMap() {
        // 基于准备好的dom，初始化echarts实例
        let myChartapp = this.$echarts.init(document.getElementById("byteVCellId"));

        let option = {
          tooltip: {
            trigger: 'item'
          },

          visualMap: {
            show: false,
            min: 0,
            max: 40,
            seriesIndex: 0,
            calculable: true,
            inRange: {
              color: ['blue', 'green', 'yellow', 'red']
              // color: ['green', 'yellow', 'red']
            }
          },
          geo: {
            map: 'china',
            zoom: 1.25,
            label: {
              emphasis: {
                show: true
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#101f32',
                borderColor: '#40c6cd'
              },
              emphasis: {
                areaColor: '#555'
              }
            }
          },
          series: [{
            name: '中国',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: this.locationCarsList,
            pointSize: 7,
            blurSize: 3
          }]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChartapp.setOption(option);

      },
      // 车辆时段分时统计可视化
      drawChartCarPeriodTimeNum() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("drawChartCarPeriodTimeNum"));
        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {
            data: ['今日分时车辆数', '昨日分时车辆数'],
            textStyle: {
              color: '#fff'
            }
          },
          xAxis: [
            {
              type: 'category',
              data: this.timeAxis,
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 11
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '车辆数',
              min: 0,
              max: this.carMax + 1000,
              interval: 5000,
              offset: -10,
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 11
                }
              },
              splitLine:{show: false},
              nameTextStyle: {
                color: '#fff'
              }
            }
          ],
          series: [
            {
              name: '今日分时车辆数',
              type: 'bar',
              data: this.carTodayPeriodData,
              color: '#00edfd'
            },
            {
              name: '昨日分时车辆数',
              type: 'line',
              smooth: true,
              lineStyle: {
                color: '#fff'
              },
              color: '#fff',
              data: this.carYesterdayPeriodData
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      // 应用车辆时段分时统计可视化
      drawChartAppPeriodTimeNum() {
        // 基于准备好的dom，初始化echarts实例
        let myChartapp = this.$echarts.init(document.getElementById("drawChartAppPeriodTimeNum"));
        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {
            data: ['今日分时应用车辆数', '昨日分时应用车辆数'],
            textStyle: {
              color: '#fff'
            }
          },
          xAxis: [
            {
              type: 'category',
              data: this.timeAppAxis,
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 11
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '车辆数',
              min: 0,
              max: this.appMax + 1000,
              interval: 5000,
              axisLabel: {
                formatter: '{value} 辆'
              },
              splitLine:{show: false},
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 11
                }
              },
              nameTextStyle: {
                color: '#fff'
              }
            }
          ],
          series: [
            {
              name: '今日分时应用车辆数',
              type: 'bar',
              data: this.appTodayPeriodData,
              color: '#00edfd'
            },
            {
              name: '昨日分时应用车辆数',
              type: 'line',
              smooth: true,
              lineStyle: {
                color: '#fff'
              },
              color: '#fff',
              data: this.appYesterdayPeriodData
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartapp.setOption(option);
      },
      // 实时车辆数据可视化
      drawChartCarRealTimeNum() {
        // 基于准备好的dom，初始化echarts实例
        let myChartapp = this.$echarts.init(document.getElementById("drawChartCarRealTimeNum"));
        // 指定图表的配置项和数据
        let option = {
          series: [
            {
              name: '实时车辆数',
              type: 'gauge',
              detail: {formatter: '{this.realTimeCarNum}辆'},
              data: [{value: this.realTimeCarNum, name: '实时车辆数', color: 'white'}],
              // max: this.realTimeCarNum * (Math.random(1) + 1).toFixed(2),
              max: this.realTimeCarNumMax * 1.5,
              axisTick: false,
              axisLabel: {
                show: false
              },
              pointer: {
                width: 4
              },
              axisLine: {
                lineStyle: {
                  color: [[1, '#00edfd']],
                  width: 10
                }
              },
              splitLine: {
                length: 10
              },
              title: {
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: 12,
                  color: "white"
                }
              },
              detail: {
                fontSize: 14
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartapp.setOption(option);
      },
      // 累计活跃数据可视化
      drawChartCarActiveNum() {
        // 基于准备好的dom，初始化echarts实例
        let myChartapp = this.$echarts.init(document.getElementById("drawChartCarActiveNum"));
        // 指定图表的配置项和数据
        let option = {
          series: [
            {
              name: '活跃车辆数',
              type: 'gauge',
              detail: {formatter: this.dailyCarNum},
              data: [{value: this.dailyCarNum, name: '活跃车辆数', color: 'white'}],
              max: this.dailyCarNumMax * 1.5,
              // max: this.dailyCarNum * (Math.random(1) + 1).toFixed(2),
              axisTick: false,
              axisLabel: {
                show: false
              },
              pointer: {
                width: 4
              },
              axisLine: {
                lineStyle: {
                  color: [[1, '#00edfd']],
                  width: 10
                }
              },
              splitLine: {
                length: 10
              },
              title: {
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: 12,
                  color: "white"
                }
              },
              detail: {
                fontSize: 14
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartapp.setOption(option);
      },

      // 初始化车辆分时
      initCarPeriod(){
        let strs =this.initTime();
        let data = new Date();
        let list_date = strs.split("-");
        let month = list_date[0]
        let date = list_date[1]
        let hour = list_date[2];
        let minute = list_date[3]
        let second = list_date[4]
        let ymd = data.getFullYear() + "-" + month + "-" + date;
        let timeMark = hour+'' + minute + '' + second+'';
        let api = this.Global.baseUrl+"/initCarPeriodData/"+ymd+"/"+timeMark;
        this.$axios.get(api).then(response=>{
          let result = response.data
          let tmpTimes = ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30'
            ,'07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30'
            ,'15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30']
          let timeAxis1 = [] // 今日
          let timeAxis2 = [] // 昨日
          let tempToday = []
          let tempYes = []
          for (let i = 0;i<result.length;i++){
            if(result[i].value1 == ymd){
              tempToday.push(result[i].value3)
              // this.carTodayPeriodData.push(result[i].value3)
              timeAxis1.push(result[i].value2)

            }else{
              tempYes.push(result[i].value3)
              // this.carYesterdayPeriodData.push(result[i].value3)
              timeAxis2.push(result[i].value2)

              // this.timeAxis.push(result[i].value2)
            }
          }
          // console.log(timeAxis1,"今日")
          // console.log(timeAxis2,"昨日")

          let b = 0
          let c = 0

          for(let a=0;a<tmpTimes.length;a++){
            let b_flag = false
            let c_flag = false
            // console.log(tmpTimes[a],"tmpTimes[a]")
            if(timeAxis1[b] == tmpTimes[a] ){
              // console.log(timeAxis1[b],"timeAxis1[b]")
              this.carTodayPeriodData.push(tempToday[b])
              b_flag = true
              b=b+1
            }else if(b<timeAxis1.length || timeAxis1.length == 0){
              b_flag = true
              this.carTodayPeriodData.push(0)
            }
            if (timeAxis2[c] == tmpTimes[a] ){
              // console.log(timeAxis2[c],"timeAxis2[c]")
              this.carYesterdayPeriodData.push(tempYes[c])
              c_flag = true
              c=c+1
            }else if(c<timeAxis2.length || timeAxis2.length == 0){
              c_flag = true
              this.carYesterdayPeriodData.push(0)
            }
            if(b==timeAxis1.length && c==timeAxis2.length){
              this.timeAxis.push(tmpTimes[a])
              break
            }else if(!b_flag && !c_flag && (b<timeAxis1.length || c<timeAxis2.length )){
              this.carTodayPeriodData.push(0)
              this.carYesterdayPeriodData.push(0)
              this.timeAxis.push(tmpTimes[a])
            }else if(!b_flag && c_flag){
              this.carTodayPeriodData.push(0)
              this.timeAxis.push(tmpTimes[a])
            }else if(b_flag && !c_flag){
              this.carYesterdayPeriodData.push(0)
              this.timeAxis.push(tmpTimes[a])
            }else{
              this.timeAxis.push(tmpTimes[a])
            }

          }




          // console.log(max_len,"max_len")
          // console.log(this.carTodayPeriodData,"今日-")
          // console.log(this.carYesterdayPeriodData,"昨日-")
          // console.log(this.timeAxis,"timeAxis-")


          var todayMax = Math.max.apply(null, this.carTodayPeriodData)
          var yesterdayMax = Math.max.apply(null, this.carYesterdayPeriodData)
          if (todayMax > yesterdayMax) {
            this.carMax = todayMax;
          } else {
            this.carMax = yesterdayMax;
          }
          this.drawChartCarPeriodTimeNum()
        }).catch(err=>{

        })
      },
      // 初始化应用车辆分时
      initCarAppPeriod(){
        let strs =this.initTime();
        let data = new Date();
        let list_date = strs.split("-");
        let month = list_date[0]
        let date = list_date[1]
        let hour = list_date[2];
        let minute = list_date[3]
        let second = list_date[4]
        let ymd = data.getFullYear() + "-" + month + "-" + date;
        let timeMark = hour+'' + minute + '' + second+'';
        let api = this.Global.baseUrl+"/initAppPeriodData/"+ymd+"/"+timeMark;
        this.$axios.get(api).then(response=>{
          let result = response.data
          // console.log(len)/
          let tmpTimes = ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30'
            ,'07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30'
            ,'15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30']
          let timeAxis1 = [] // 今日
          let timeAxis2 = [] // 昨日
          let tempToday = []
          let tempYes = []
          for (let i = 0;i<result.length;i++){
            if(result[i].value1 == ymd){
              // this.appTodayPeriodData.push(result[i].value3)
              tempToday.push(result[i].value3)
              timeAxis1.push(result[i].value2)
            }else{
              // this.appYesterdayPeriodData.push(result[i].value3)
              tempYes.push(result[i].value3)
              timeAxis2.push(result[i].value2)
            }
            // this.timeAppAxis.push(result[i].value2)
          }

          let b = 0
          let c = 0

          for(let a=0;a<tmpTimes.length;a++){
            let b_flag = false
            let c_flag = false
            // console.log(tmpTimes[a],"tmpTimes[a]")
            if(timeAxis1[b] == tmpTimes[a] ){
              // console.log(timeAxis1[b],"timeAxis1[b]")
              this.appTodayPeriodData.push(tempToday[b])
              b_flag = true
              b=b+1
            }else if(b<timeAxis1.length|| timeAxis1.length == 0){
              b_flag = true
              this.appTodayPeriodData.push(0)
            }
            if (timeAxis2[c] == tmpTimes[a] ){
              // console.log(timeAxis2[c],"timeAxis2[c]")
              this.appYesterdayPeriodData.push(tempYes[c])
              c_flag = true
              c=c+1
            }else if(c<timeAxis2.length|| timeAxis2.length == 0){
              c_flag = true
              this.appYesterdayPeriodData.push(0)
            }
            if(b==timeAxis1.length && c==timeAxis2.length){
              this.timeAppAxis.push(tmpTimes[a])
              break
            }else if(!b_flag && !c_flag && (b<timeAxis1.length || c<timeAxis2.length)){
              this.appTodayPeriodData.push(0)
              this.appYesterdayPeriodData.push(0)
              this.timeAppAxis.push(tmpTimes[a])
            }else if(!b_flag && c_flag){
              this.appTodayPeriodData.push(0)
              this.timeAppAxis.push(tmpTimes[a])
            }else if(b_flag && !c_flag){
              this.appYesterdayPeriodData.push(0)
              this.timeAppAxis.push(tmpTimes[a])
            }else{
              this.timeAppAxis.push(tmpTimes[a])
            }

          }

          var todayMax = Math.max.apply(null, this.appTodayPeriodData)
          var yesterdayMax = Math.max.apply(null, this.appYesterdayPeriodData)
          if (todayMax > yesterdayMax) {
            this.appMax = todayMax;
          } else {
            this.appMax = yesterdayMax;
          }
          this.drawChartAppPeriodTimeNum()
        }).catch(err=>{

        })
      },

      // 获取车辆分时数据
      getCarPeriodData(ymd, timeMark, hour, hm) {
        //http://localhost:8082/getCarPeriodData/2021-01-04/19:51:11
        var api = this.Global.baseUrl+'/getCarPeriodData/' + ymd + '/' + timeMark;
        // var api = 'http://bigdata13:8082/getCarPeriodData/' + ymd + '/' + timeMark;
        this.$axios.get(api).then((res) => {
          // 如果是新的新的一天,则重新开始计数  hour == '00'  || this.carTodayPeriodData.length == 10
          if (hour == '00') {
            this.timeAxis = [];
            this.carTodayPeriodData = [];
            this.carYesterdayPeriodData = [];
          }
          // 时间刻度轴
          this.timeAxis.push(hm);
          // console.log("时间段："+this.timeAxis)
          // 今日的当前时间的数据
          this.carTodayPeriodData.push(res.data[0].value3)
          // console.log("测试当前日期" + this.carTodayPeriodData)
          // 昨日当前时间的数据
          if (res.data[1] == null) {
            this.carYesterdayPeriodData.push(0)
          } else {
            this.carYesterdayPeriodData.push(res.data[1].value3)
          }

          // console.log("测试昨日日期" + this.carYesterdayPeriodData)

          var todayMax = Math.max.apply(null, this.carTodayPeriodData)
          var yesterdayMax = Math.max.apply(null, this.carYesterdayPeriodData)
          if (todayMax > yesterdayMax) {
            this.carMax = todayMax
          } else {
            this.carMax = yesterdayMax
          }
          this.drawChartCarPeriodTimeNum()


        }).catch((err) => {
          console.log(err)
        })
      },

      // 获取app车辆分时段的数据
      getAppPeriodData(ymd, timeMark, hour, hm) {
        var api = this.Global.baseUrl+'/getAppPeriodData/' + ymd + "/" + timeMark;
        // var api = 'http://bigdata13:8082/getAppPeriodData/' + ymd + "/" + timeMark;
        this.$axios.get(api).then((res) => {
          if (hour == '00') {
            this.timeAppAxis = []
            this.appTodayPeriodData = []
            this.appYesterdayPeriodData = []
          }
          this.timeAppAxis.push(hm);
          // 今日的当前时间的数据
          this.appTodayPeriodData.push(res.data[0].value3)
          // console.log("测试当前日期app"+this.appTodayPeriodData)
          // 昨日当前时间的数据
          if (res.data[1] == null) {
            this.appYesterdayPeriodData.push(0)
          } else {
            this.appYesterdayPeriodData.push(res.data[1].value3)
          }
          // console.log("测试昨日日期app"+this.appYesterdayPeriodData)

          var todayMax = Math.max.apply(null, this.appTodayPeriodData)
          var yesterdayMax = Math.max.apply(null, this.appYesterdayPeriodData)
          if (todayMax > yesterdayMax) {
            this.appMax = todayMax;
          } else {
            this.appMax = yesterdayMax;
          }
          this.drawChartAppPeriodTimeNum()
        }).catch((err) => {
          console.log(err)
        })
      },

      initTime(){
        var data = new Date();
        var month = data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
        var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
        var hour = data.getHours() <= 9 ? "0" + data.getHours() : data.getHours();
        var minute = data.getMinutes() <= 9 ? "0" + data.getMinutes() : data.getMinutes();
        var second = data.getSeconds() <= 9 ? "0" + data.getSeconds() : data.getSeconds();

        return month+"-"+date+"-"+hour+"-"+minute+"-"+second
      },

      // 获取当前时间
      getCurrentTime() {
        var strs =this.initTime();
        var data = new Date();
        var list_date = strs.split("-");
        var month = list_date[0]
        var date = list_date[1]
        var hour = list_date[2]
        var minute = list_date[3]
        var second = list_date[4]
        this.curretTime = data.getFullYear() + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
        // 调用car分时数据方法hour == '00' && (minute == '00' ||minute == '30')
        // second == '00'
        if ((minute == '00' ||minute == '30') && second == '00') {
          var ymd = data.getFullYear() + "-" + month + "-" + date;
          var timeMark = hour+'' + minute + '' + second+'';
          var hm = hour + ":" + minute;
          this.getCarPeriodData(ymd, timeMark, hour, hm);
          this.getAppPeriodData(ymd, timeMark, hour, hm)
        }
        // 每日00点重置数据
        if (hour == '00') {
          this.dailyAppNumNav = 0
          this.dailyAppNumMusic = 0
          this.dailyAppNumVoice = 0
          this.dailyCarNum = 0
          this.dailyAppNumNav = 0
          this.dailyAppNumMusic = 0
          this.dailyAppNumVoice = 0
        }
      },
      // 获取实时在线车辆
      getRealCarData() {
        var api =this.Global.baseUrl+ "/selectCarSum"
        // var api = "http://bigdata13:8082/selectCarSum"
        this.$axios.get(api).then((response) => {
          // console.log("获取实时在线车辆：" + response.data)
          this.realTimeCarNum = response.data;
          if (this.realTimeCarNum > this.realTimeCarNumMax) {
            this.realTimeCarNumMax = this.realTimeCarNum;
          }
          this.drawChartCarRealTimeNum();
        }).catch((error) => {//这里使用的都是箭头函数
          console.log(error)
        })
      },
      // 获取今日活跃车辆
      getDailyCarNum() {
        var api =this.Global.baseUrl+ "/selectCarAll"
        // var api = "http://bigdata13:8082/selectCarAll"
        this.$axios.get(api).then((response) => {
          // console.log("获取今日活跃车辆：" + response.data)
          // 数据还未读取完成，不做更新操作
          if (response.data > this.dailyCarNum) {
            this.dailyCarNum = response.data
            if (this.dailyCarNum > this.dailyCarNumMax) {
              this.dailyCarNumMax = this.dailyCarNum
            }
            this.drawChartCarActiveNum()
          }
        }).catch((error) => {
          console.log(error)
        })
      },

      // 实时应用数据可视化
      drawChartRealAppNum(data) {
        // 基于准备好的dom，初始化echarts实例

        var getId = ""
        //  1-> 音乐  2-> 语音  3-> 导航
        if(data.value3 == 'c185b39ffacc022b56f125489a7aca0a'){
          getId = "real_app_1"
        }else if(data.value3 == '97f40fc2a0a7eafe83c5b7f3cee9389a'){
          getId = "real_app_2"
        }else if(data.value3 == "caa1795e03c64417784a2e4294ba827a"){
          getId = "real_app_3"
        }

        let myChartapp = this.$echarts.init(document.getElementById(getId));
        // 指定图表的配置项和数据
        let option = {
          series: [
            {
              name: "实时" + data.value2,
              type: 'gauge',
              detail: {formatter: data.value1},
              data: [{
                value: data.value1,
                name: data.value2.substring(data.value2.length - 2, data.value2.length),
                color: 'white'
              }],
              max: data.value1 * (Math.random(1) + 1).toFixed(2),
              axisTick: false,
              axisLabel: {
                show: false
              },
              pointer: {
                width: 3
              },
              axisLine: {
                lineStyle: {
                  color: [[1, '#00edfd']],
                  width: 10
                }
              },
              splitLine: {
                length: 10
              },
              title: {
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: 10,
                  color: "white"
                }
              },
              detail: {
                fontSize: 14
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartapp.setOption(option);
      },

      // 获取实时在使用的应用
      getRealAppData() {
        var api = this.Global.baseUrl+"/selectAppSum";
        // var api = "http://bigdata13:8082/selectAppSum";
        this.$axios.get(api).then((response) => {
          // console.log("获取实时在使用的应用：" + response.data)
          for (var i = 0; i < response.data.length; i++) {
            // this.appRealPoJoList[i] = response.data[i];
            this.drawChartRealAppNum(response.data[i])
          }
        }).catch((error) => {
          console.log(error)
        })
      },

      // 实时应用数据可视化
      drawChartActiveAppNum(num, data) {
        // 基于准备好的dom，初始化echarts实例

        var getId = ""
        //  1-> 音乐  2-> 语音  3-> 导航
        if(data.value3 == 'c185b39ffacc022b56f125489a7aca0a'){
          getId = "active_app_1"
        }else if(data.value3 == '97f40fc2a0a7eafe83c5b7f3cee9389a'){
          getId = "active_app_2"
        }else if(data.value3 == "caa1795e03c64417784a2e4294ba827a"){
          getId = "active_app_3"
        }

        let myChartapp = this.$echarts.init(document.getElementById(getId));
        // 指定图表的配置项和数据
        let option = {
          series: [
            {
              name: "活跃" + data.value2,
              type: 'gauge',
              detail: {formatter: data.value1},
              data: [{
                value: data.value1,
                name: data.value2.substring(data.value2.length - 2, data.value2.length),
                color: 'white'
              }],
              max: data.value1 * (Math.random(1) + 1).toFixed(2),
              axisTick: false,
              axisLabel: {
                show: false
              },
              pointer: {
                width: 3
              },
              axisLine: {
                lineStyle: {
                  color: [[1, '#00edfd']],
                  width: 10
                }
              },
              splitLine: {
                length: 10
              },
              title: {
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: 10,
                  color: "white"
                }
              },
              detail: {
                fontSize: 14
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartapp.setOption(option);
      },
      // 今日活跃应用数量
      getDailyAppNum() {
        var api =this.Global.baseUrl+ "/selectAppIdClassNum";
        // var api = "http://bigdata13:8082/selectAppIdClassNum";
        this.$axios.get(api).then((response) => {
          // console.log("今日活跃应用数量：" + response.data)
          for (var i = 0; i < response.data.length; i++) {
            // this.appPojoDailyList[i] = response.data[i]
            if (response.data[i].value3 == 'c185b39ffacc022b56f125489a7aca0a') {// 音乐
              if (this.dailyAppNumMusic > response.data[i].value1) {
                response.data[i].value1 = this.dailyAppNumMusic
              } else {
                this.dailyAppNumMusic = response.data[i].value1
              }
              this.drawChartActiveAppNum(i + 1, response.data[i])
            } else if (response.data[i].value3 == 'caa1795e03c64417784a2e4294ba827a') {// 导航
              if (this.dailyAppNumNav > response.data[i].value1) {
                response.data[i].value1 = this.dailyAppNumNav
              } else {
                this.dailyAppNumNav = response.data[i].value1
              }
              this.drawChartActiveAppNum(i + 1, response.data[i])
            } else { // 语音
              if (this.dailyAppNumVoice > response.data[i].value1) {
                response.data[i].value1 = this.dailyAppNumVoice
              } else {
                this.dailyAppNumVoice = response.data[i].value1
              }
              this.drawChartActiveAppNum(i + 1, response.data[i])
            }

          }
        }).catch((error) => {
          console.log(error)
        })
      },

      // 实时车辆地域分布进行同步
      syncCarLocationData() {
        var api =this.Global.baseUrl+ '/carLocationSyncData'
        // var api = 'http://bigdata13:8082/carLocationSyncData'
        this.$axios.get(api).then((response) => {
          // this.getDataForProvinceTop()
        }).catch((error) => {
          console.log(error)
        })
      },

      // 获取省份的top10
      getDataForProvinceTop() {
        var api =this.Global.baseUrl+ "/selectTop"
        // var api = "http://bigdata13:8082/selectTop"
        this.$axios.get(api).then((response) => {
          this.proTopList1 = []
          this.proTopList2 = []
          for (var i = 0; i < response.data.length; i++) {
            this.proTopList1.push(response.data[i].value1)
            this.proTopList2.push(response.data[i].value2)
          }
          this.drawChartProvinceTop()
        }).catch((error) => {
          console.log(error)
        })
      },

      // 绘制实时在线的省份top10
      drawChartProvinceTop() {
        // 基于准备好的dom，初始化echarts实例
        let myChartapp = this.$echarts.init(document.getElementById("provinceTop"));
        let option = {
          color: ['#00edfd'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.proTopList1,
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                lineStyle: {
                  color: '#ffffff'
                }
              },
              axisLabel: {
                fontSize: 12,
                // rotate:-90
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              interval: 500,
              axisLine: {
                lineStyle: {
                  color: '#ffffff'
                }
              },
              splitLine:{show: false}
            }
          ],
          series: [
            {
              type: 'bar',
              barWidth: '60%',
              data: this.proTopList2
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartapp.setOption(option);
      }



    }
  }
</script>

<style scoped>

  /*@import "../assets/css/app.css";*/
  /*@import "../assets/css/bootstrap.min.css";*/

</style>
